<template>
    <div style="background: #F7F7F7">
			
				<!--内容-->
				<div style="padding-bottom: 0.4rem;background: #fff;overflow: hidden">
					<!-- <div v-if='count!=0||count!="0"'> -->
						<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
						  <div id="dataList">
								<div class="n" v-for="(item,index) in tab0.list" @click='listclick(item.tag,item.id,item.type)'>
									<div class="imgpic">
										<img :src="img+item.thumb" alt="" class="img1">
									</div>
									<div class="right">
										<p>{{item.name}}</p>
									<div class="right-bottom">
										<span class="rightjia"><img src="../../../src/assets/img/colorren.png"/><span>{{item.sales}}人已加入</span></span>
										<!-- <span>{{item.tag_name}}</span> -->
										<span class="rightprice" style="color: #0287FF;" v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">免费</span>
										<span class="rightprice" v-else>￥{{item.price}}</span>
									</div>
									</div>
								</div>
							</div>
						</mescroll-vue>

				</div>

    </div>
</template>

<script>
	  import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Zhiye",
				components:{
				  MescrollVue
				},
      data(){
          return{
						imgSrctop: require("../../assets/img/backtop.png"), 
						imgSrc: require("../../assets/img/kongbai.png"), 
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						tabType: 0 ,// 菜单类型
						loadzheng:false,
						noloadzheng:false,
						load:false,
						allxia:3,
						arr:[],
						count:'',
						ind:'',   //点击的第几个联动
            b:false,
            quanbu:false,
            quanbu1:false,
            quanbu2:false,
            input:'',
            tuijian:[],
            img:this.$store.state.img,
						allLoaded:false,
						page:1
          }
      },
      methods:{
		  // 点击列表
        listclick(tag,id,type){
					// tag 1  2班级  3专题 4课程
					if(tag==4||tag=='4'){
							this.$router.push({
								path:'/course',
								query:{
								 cid:id
								}
							})
					}else if(tag==3||tag=='3'){
						this.$router.push({
						path:'/specialtopic',
						query:{
						 stid:id
						}
						})
					}else{
						this.$router.push({
						path:'/class',
						query:{
						  bid:id
						}
						})
					}
			
        },
				mescrollInit0 (mescroll) {
					this.tab0.mescroll = mescroll;
				},
				getMescrollUp (tabType) {
					// let emptyWarpId = 'dataList0';
					return {
					auto: true,
					callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					toTop: {
						//回到顶部按钮
						src: this.imgSrctop, //图片路径,默认null,支持网络图
						offset: 500 //列表滚动1000px才显示回到顶部按钮
					},
					 empty: {
						warpId: 'dataList', // 父布局的id;
						icon: this.imgSrc, // 图标,默认null
						tip: '暂时没有找到您所需要的内容…', // 提示
						
					},
					
					}
				},
				upCallback (page, mescroll) {
					var that = this;
					// setTimeout(function(){
					that.axios.get(that.$store.state.url +'Mid/allList',{
						params:{
							page:page.num,
							limit:page.size,
							new:1
						},
					}).then(res=>{
						if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data.lists;
							mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
							 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
							 // console.log(this.tab0.list)
						}else{
							mescroll.endErr()
						}
					})
				},
		    
      },
			beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
			  next(vm => {
			    let curMescroll = vm.$refs['mescroll' + vm.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
			    curMescroll && curMescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
			  })
			},
			beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
			  let curMescroll = this.$refs['mescroll' + this.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
			  curMescroll && curMescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
			  next()
			},
			mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
			}
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	  padding-bottom: 1rem;
	}
  .swiper-slide{
    text-align: justify;
  }
  .topImg{
    width: 100%;
    height:3.3rem;
    border-radius:0.1rem;
  }
  .search{
    width: 92%;
    margin: auto;
    height: 0.56rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search img{
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.05rem;
  }
  .img{
    width: 100%;
    height: 3.3rem;
    margin-top: 0.16rem;
    border-radius: 0.1rem;
  }
  
  .selecttop{
	  position: relative;
	  background: #fff;
	  margin-top: 0.3rem;
  }
  .dongtai{
    width: 100%;
    margin: auto;
   background: #fff;
    margin-top: 0.3rem;
    height:0.7rem;
    border-radius:0.08rem;
    box-sizing: border-box;
    padding: 0.15rem 0.16rem 0.19rem 0.16rem;
    text-align: center;
  }
  .dongtai img{
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
  .dongtai span:nth-child(2){
    vertical-align: middle;
    font-size: 0.28rem;
    color: #333333;
  }
  .dongtai span:nth-child(3){
    width: 4.8rem;
    font-size: 0.26rem;
    color: #666666;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tuijian{
    width: 100%;
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.3rem 0 0.3rem 0;
  }
  .top{
    width: 92%;
    margin: auto;
  }
  .top span{
    font-size:0.34rem;
    font-weight:bold;
    line-height:0.32rem;
    vertical-align: middle;
  }
  .top img{
    width: 0.28rem;
    vertical-align: middle;
  }
  .hotclass{
    width: 5.3rem;
    margin-top: 0.2rem;
    position: relative;
  }
  .tie{
    position: absolute;
    left: 0.4rem;
    top: 0;
    width: 1rem;
  }
  .miaoshu{
    width:100%;
    height:0.61rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
    white-space:normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
  }
  .ce{
    margin-top: 0.25rem;
  }
  .ce:after{
    content:'';
    display: block;
    clear: both;
  }
  .leftImg{
    /*width: 100%;*/
    float: left;
  }
  .leftImg div{
    display: inline-block;
    width: 0.8rem;
    text-align: center;
    font-size: 0.24rem;
  }
  .leftImg div img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
  }
  .leftImg p{
    margin-top: 0.05rem;
  }
  .rightZ{
    float: right;
    text-align: right;
  }
  .rightZ p:nth-child(1),.rightZ p:nth-child(2){
    display: inline-block;
  }
  .rightZ p:nth-child(1){
    font-size:0.3rem;
    font-weight:800;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    /*margin-top: 0.1rem;*/
  }
  .rightZ p:nth-child(2){
    padding: 0 0.1rem 0 0.1rem;
    border:0.02rem solid rgba(255,2,20,1);
    border-radius:0.16rem;
    font-size: 0.24rem;
    color: #FF0214;
    margin-right: 0.02rem;
    margin-top: 0.07rem;
  }
  .rightZ p:nth-child(3){
    width: 2.6rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    overflow: hidden;
    margin-top: 0.15rem;
    font-size:0.24rem;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }

  .btoS{
    width: 100%;
    margin-top: 0.2rem;
  }
  .btoS p:nth-child(1){
    float: left;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .btoS p:nth-child(2){
    float: right;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .n{
    width: 92%;
    margin:0.2rem auto;
		padding-bottom: .3rem;
		border-bottom: 1px solid #EDEDED;
  }
	.n .imgpic{
		width: 6.9rem;
		height: 3.88rem;
		border-radius: .1rem;
		overflow: hidden;
	}
  .img1{
    width: 100%;
    height: 100%;
  }
  .right{
    width: 6.9rem;
    height: 100%;
    margin-top: .18rem;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right .right-bottom{
    margin-top: 0.3rem;
		display: flex;
		justify-content: space-between;
  }
	.rightjia img{
		width: .32rem;
		height: .32rem;
	}
	.rightjia span{
		color: #C2C9D3;
		font-size: .24rem;
		margin-left: .08rem;
	}
  /* .right p:nth-child(2) span:nth-child(1){
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    padding: 0.02rem 0.17rem 0.02rem 0.17rem;
    font-size: 0.24rem;
    color:rgba(2,135,255,1);
    line-height:0.32rem;
  } */
  .right .right-bottom .rightprice{
    /* float: right; */
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }
  .shang{
    width: 30%;
    height: 0.5rem;
    display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{
    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    margin-left: 0.14rem;
    width: 0.15rem;
    height: 0.13rem;
  }
  .xia{
    width: 92%;
    margin: auto;
    /*margin-top: 0.2rem;*/
    padding-top: 0.2rem;
  }
  .spanspan{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
  /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;
    position: absolute;
    top: 0.7rem;
    left: 0;
  }
  /*.one{*/
  /*display: inline-block;*/
  /*}*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

</style>
